<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:200px;height:40px;line-height:40px;margin: 50px auto;}
        .box span{display: block;height:40px;border: solid 1px black;}
        .box ul{margin: 0;padding:0;list-style: none;border:solid 1px black;
            border-top:none;display: none;}
        .box ul li{text-indent: 4px;display: flex;}
        .box ul li.hover{background: #66f;color: #fff;}
        .box ul li#active::after{content:"*";margin-left: auto;margin-right: 20px;}
    </style>
</head>
<body>
    <div class="box">
        <span></span>
        <ul>
            <li>上海</li>
            <li>杭州</li>
            <li>南京</li>
            <li>苏州</li>
            <li>北京</li>
            <li>深圳</li>
            <li>广州</li>
        </ul>
    </div>
    <script>
        // 模拟下拉菜单（select+option）
        //     - n遍+
        var span = document.querySelector("span")
        var ul = document.querySelector("ul")
        var lis = ul.children;
        var flag = 0;
        var index = 0;
        span.innerHTML = lis[index].innerHTML;
        lis[index].id = "active";

        span.onclick = function(eve){
            var e = eve || window.event;
            e.stopPropagation(); //阻止冒泡

            if(flag === 0){
                ul.style.display = "block";
                flag = 1;
                if(keyIndex !== undefined){
                    lis[keyIndex].className = "";
                    keyIndex = undefined;
                }
            }else{
                ul.style.display = "none";
                flag = 0;
            }
        }

        document.onclick = function(){
            ul.style.display = "none";
            flag = 0;
        }

        for(var i=0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onmouseover = function(){
                if(keyIndex !== undefined){
                    lis[keyIndex].className = "";
                }
                this.className = "hover";
                keyIndex = this.index;
            }
            lis[i].onmouseout = function(){
                lis[keyIndex].className = "";
                keyIndex = undefined;
            }
            lis[i].onclick = function(){
                span.innerHTML = this.innerHTML;
                lis[index].id = "";
                this.id = "active";
                index = this.index;
            }
        }

        var keyIndex = undefined;

        document.onkeydown = function(eve){
            if( flag === 0 ) return ;

            var e = eve || window.event;
            var code = e.keyCode || e.which;

            if(code === 38){
                if(keyIndex === undefined){
                    keyIndex = lis.length-1;
                }else if(keyIndex === 0){
                    keyIndex = 0;
                }else{
                    keyIndex--;
                }
                setKeyActive(keyIndex);
            }

            if(code === 40){
                if(keyIndex === undefined){
                    keyIndex = 0;
                }else if(keyIndex === lis.length-1){
                    keyIndex = lis.length-1;
                }else{
                    keyIndex++;
                }
                setKeyActive(keyIndex);
            }

            if(code === 13){
                span.innerHTML = lis[keyIndex].innerHTML;
                lis[index].id = "";
                lis[keyIndex].id = "active";
                index = keyIndex;
                ul.style.display = "none";
                flag = 0;
            }
        }

        function setKeyActive(now){
            for(var i=0;i<lis.length;i++){
                lis[i].className = "";
            }
            lis[now].className = "hover";
        }
    </script>
</body>
</html>